<template>
  <base-modal
    :title="initData.pageType === 'edit' ? '危大工程分类编辑': '危大工程分类添加'"
    cancelText="取消"
    okText="保存"
    :width="800"
    v-on="$listeners"
    @ok="handleOk"
    :confirmLoading="loading.isSaving"
  >
    <a-form-model ref="form" :model="formInfo" :rules="rules" :hideRequiredMark="true">
      <a-row :gutter="24">
        <a-col :md="12" :sm="12">
          <a-form-model-item
            label="分类名称"
            :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
            prop="name"
          >
            <BaseInput placeholder="请输入" v-model.trim="formInfo.name" />
          </a-form-model-item>
        </a-col>
        <a-col :md="12" :sm="12">
          <a-form-model-item
            label="状态"
            :labelCol="{ lg: { span: 6 }, sm: { span: 5 } }"
            :wrapperCol="{ lg: { span: 18 }, sm: { span: 18 } }"
            prop="enabled"
          >
            <a-select placeholder="请选择状态" v-model="formInfo.enabled">
              <a-select-option :value="1">可用</a-select-option>
              <a-select-option :value="0">不可用</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </base-modal>
</template>

<script>
import { addSelectListByType, updateSelectListByType, getSelectListByTypeDetail } from '@/api/safetySupervision/common.js'
import BaseModal from '@/components/BaseModal'
export default {
    name:'a'+Date.now(),  components: {
    BaseModal,
  },
  props: {
    initData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      loading: {
        isSaving: false
      },
      formInfo: {
        name: '',
        enabled: 1,
      },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        enabled: [{ required: true, message: '请选择状态', trigger: 'change' }],
      },
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    validateForm() {
      let flag = false
      this.$refs.form.validate((valid) => {
        flag = valid
      })
      return flag
    },
    async getDetail() {
      const { id } = this.initData
      if (!id) return
      const params = {
        id,
      }
      const [err, res] = await getSelectListByTypeDetail(params)
      if (!err) {
        this.formInfo = {
          ...this.formInfo,
          ...res.data,
          enabled: Number(res.data.enabled),
        }
      }
    },
    async handleOk() {
      if (!this.validateForm()) return
      if (this.loading.isSaving) return
      this.loading.isSaving = true
      const { id, name, enabled } = this.formInfo
      const params = {
        id,
        name,
        enabled: !!enabled,
        type: 8
      }
      const { pageType } = this.initData
      const fn = pageType === 'edit' ? updateSelectListByType : addSelectListByType
      const [err, res] = await fn(params)
      if (!err) {
        this.$message.success('成功')
        this.$emit('confirm')
      }
      this.loading.isSaving = false
    },
  },
}
</script>

<style lang="less" scoped>
form .ant-mentions,
form textarea.ant-input {
  height: auto !important;
  width: 100%;
}
</style>